<template>
	<div style="margin: 20px; margin-top: 20px;">
    <div class="title-box">
      <span>7</span>
      <span>4</span>
      <span>7</span>
      <p class="gongyou">学校共有人数</p>
    </div>
    <div class="school">
      <img src="../../assets/hc-center.png" width="80%">
      <div class="hc-left">学生：702人</div>
      <div class="hc-right">教职工：45人</div>
    </div>
	</div>
</template>
<script>
export default {
	name: 'Center',
	components: {

	},
	props: {
		rows: {
			default: {}
		}
	},
	data() {
		return {
			centerData: {},
			centerData2: {},
      
		}
	},
	mounted(){
    
		this.$watch('rows', () => {
    })
	},
	created() {
	},
	methods: {
	}
};
</script>
<style lang="less" scope>
.title-box {
    width: 100%;
    height: 170px;
    position: relative;
    color: #fff;
    padding-bottom: 10px;
    background:url(../../assets/hc-center1.png) no-repeat center center;
    overflow: hidden;
    text-align: center;
    padding-top: 20px;
  }
.number{
  background:url(../../assets/img/k.png) no-repeat center center;

}
.title-box span{
  padding: 0px 15px;
  line-height: 60px;
  font-weight: 800;
  font-size: 60px;
  border: 2px solid #188dd0;
  border-radius: 5px;
  margin: 0 5px; 
  color: #fff;
}
.gongyou{ margin-top: 29px; bottom: 0px; font-size: 14px; color: #fff }
.school{
  width: 100%;
  text-align: center;
  margin-top: -40px;
  position: relative;
  background:url(../../assets/hc-center4.png) no-repeat center bottom;
}
.hc-left{ position: absolute; color: #188dd0;background:url(../../assets/hc-center2.png) no-repeat center center; width: 10%;top: 15%;    width: 181px;height: 73px; font-size: 24px; line-height: 43px;}
.hc-right{ position: absolute; color: #188dd0;background:url(../../assets/hc-center3.png) no-repeat center center; width: 10%;top: 15%; right: 5%;   width: 181px;height: 73px; font-size: 24px; line-height: 43px;}
</style>